<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:comp="http://java.sun.com/jsf/composite/register">
<h:head>
	<title>JSF 2.0 Hello World</title>
</h:head>
<ui:composition template="/templates/layout.xhtml">
	<ui:define name="content">

		<p:growl id="messages" showDetail="true" />
				
		<p:panel header="History">
					
			<h:form id="filter">
				<p:fieldset legend="Filter" toggleable="true" toggleSpeed="500">

					<div>
						<div>
							<div style="width: 150px; float: left;">
								<h:outputLabel for="currency" value="Currency: " />
							</div>
							<div style="width: 150px; float: left;">
								<h:outputLabel for="account" value="Account: " />
							</div>
							<div style="width: 200px; float: left;">
								<h:outputLabel for="category" value="Category: " />
							</div>
							<div style="width: 200px; float: left;">
								<h:outputLabel for="year" value="Year: " />
							</div>
							<div style="width: 200px; float: left;">
								<h:outputLabel for="month" value="Month: " />
							</div>
						</div><br/>
						<div>
							<div style="width: 150px; float: left;">
								<p:selectOneMenu id="currency" value="#{historyController.filter.currency.id}">
									<f:selectItem itemLabel="All currencies"/>
									<f:selectItems value="#{accountsController.currencies}" />
								</p:selectOneMenu><br/>
								<p:selectBooleanCheckbox value="#{historyController.filter.showIgnored}">Show ignored trans.</p:selectBooleanCheckbox>
							</div>
							<div style="width: 150px; float: left;">
								<p:selectOneMenu id="account" value="#{historyController.filter.account.id}">
									<f:selectItem itemLabel="All accounts" itemValue="-1"/>
									<f:selectItems value="#{transactionsController.accounts}" />
								</p:selectOneMenu><br/>
								<p:selectBooleanCheckbox value="#{historyController.filter.groupByAccount}">Group by account</p:selectBooleanCheckbox>
							</div>
							<div style="width: 200px; float: left;">
								<p:selectOneMenu id="category" value="#{historyController.filter.category.id}">
									<f:selectItem itemLabel="All categories" itemValue="-1"/>
									<f:selectItems value="#{transactionsController.categories}" var="category" itemLabel="#{category.name}" itemValue="#{category.id}" />
								</p:selectOneMenu><br/>
								<p:selectBooleanCheckbox value="#{historyController.filter.groupByCategory}">Group by category</p:selectBooleanCheckbox>
							</div>
							<div style="width: 200px; float: left;" >
								<p:commandButton icon="ui-icon-carat-1-w" update=":filter:year" actionListener="#{historyController.updateToPreviousYear}"/>
								<p:inputText id="year" value="#{historyController.filter.year}"/>
								<p:commandButton icon="ui-icon-carat-1-e" update=":filter:year" actionListener="#{historyController.updateToNextYear}"/><br/>
								<p:selectBooleanCheckbox value="#{historyController.filter.groupByYear}">Group by year</p:selectBooleanCheckbox>
								<p:selectBooleanCheckbox value="#{historyController.filter.showAllYears}">Show all years</p:selectBooleanCheckbox>
							</div>
							<div style="width: 200px; float: left;" >
								<p:commandButton icon="ui-icon-carat-1-w" update=":filter:month, :filter:year, :filter:monthDisplay" actionListener="#{historyController.updateToPreviousMonth}"/>
								<p:inputText id="monthDisplay" value="#{historyController.monthDisplay}"/>
								<p:inputText type="hidden" id="month" value="#{historyController.filter.month}"/>
								<p:commandButton icon="ui-icon-carat-1-e" update=":filter:month, :filter:year, :filter:monthDisplay" actionListener="#{historyController.updateToNextMonth}"/>
								<p:selectBooleanCheckbox value="#{historyController.filter.showAllMonths}">Show all months</p:selectBooleanCheckbox>
							</div>
						</div>
					</div>
					<br/><br/><br/><br/>
					<p:commandButton value="Filter" icon="ui-icon-arrowrefresh-1-s" update=":form:items" actionListener="#{historyController.filter}" />
					
				</p:fieldset>
			</h:form>
			
			<h:form id="form">
				
				<p:contextMenu for="items">
					<p:menuitem value="View" icon="ui-icon-search" oncomplete="viewAccountDialog.show()" />
				</p:contextMenu>
			
				<p:dataTable value="#{historyController.data}" var="item" id="items" selection="#{historyController.selectedItem}"> 

					<p:column style="text-align: right; white-space: nowrap;">
						<f:facet name="header">Month</f:facet>					
						<h:outputText value="#{item.dateText}"/> 
					</p:column>
					
					<p:column style="text-align: right; white-space: nowrap;">
						<f:facet name="header">Account</f:facet>					
						<h:outputText value="#{item.account.name}"/> 
					</p:column>
					
					<p:column style="text-align: right; white-space: nowrap;">
						<f:facet name="header">Category</f:facet>					
						<h:outputText value="#{item.category.name}"/> 
					</p:column>

					<p:column style="text-align: right; white-space: nowrap;">
						<f:facet name="header">Income</f:facet>					
						<h:outputText value="#{item.income}">
							<f:convertNumber pattern="#,##0.00"/>
						</h:outputText>
					</p:column>
					
					<p:column style="text-align: right; white-space: nowrap;">
						<f:facet name="header">Outgoings</f:facet>					
						<h:outputText value="#{item.outgoings}">
							<f:convertNumber pattern="#,##0.00"/>
						</h:outputText> 
					</p:column>
						
					<p:column style="text-align: right; white-space: nowrap;" styleClass="#{item.balance le 0 ? 'transaction_red' : 'transaction_green'}">
						<f:facet name="header">Balance</f:facet>
						<h:outputText value="#{item.balance}" >
							<f:convertNumber pattern="#,##0.00"/>
						</h:outputText>
						<h:outputText value=" " /><h:outputText value="#{item.currency.label}" />
					</p:column>
					
					<p:column style="text-align: right; white-space: nowrap;">
						<f:facet name="header">View transactions</f:facet>
						<h:link value="View" outcome="transactions">
							<f:param name="yearMonth" value="#{item.dateYearMonth}" />
							<f:param name="account" value="#{item.account.id}" />
							<f:param name="category" value="#{item.category.id}" />
							<f:param name="currency" value="#{item.currency.id}" />
					    </h:link>
					</p:column>
	
				</p:dataTable>  
			</h:form>
		</p:panel>
	</ui:define>
</ui:composition>
</html>
